<template>
  <div class="api-engine-migration">
    <h2>接口迁移（sys_apiengine）</h2>
    {{ selectedApiNames }}
    <el-form label-width="120px">
      <el-form-item label="接口名称(多选)">
        <el-select
          v-model="selectedApiNames"
          multiple
          filterable
          placeholder="请选择要迁移的接口"
          style="width: 100%"
        >
          <el-option
            v-for="item in apiNameList"
            :key="item.Id"
            :label="item.ApiName + ' - ' + item.ApiEngineKey"
            :value="item.Id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <el-button
      type="primary"
      :disabled="selectedApiNames.length === 0 || loading"
      @click="migrateApis"
      >迁移选中接口</el-button
    >
    <el-button
      @click="fetchApiNames"
      :disabled="loading"
      style="margin-left: 10px"
      >刷新接口列表</el-button
    >
    <div v-if="loading" style="margin-top: 10px">操作中...</div>
    <div v-if="result" class="migration-result">
      <h3>迁移结果</h3>
      <ul>
        <li v-for="item in result.results" :key="item.apiName">
          <span :style="{ color: item.success ? '#27ae60' : '#e74c3c' }"
            >{{ item.apiName }}：</span
          >
          <span>{{ item.success ? "成功" : "失败" }}</span>
          <span v-if="item.message"> - {{ item.message }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, defineExpose, defineEmits } from "vue";
import { ElMessage } from "element-plus";
import axios from "axios";
import migrationApi from "../api/migrationApi";

const apiNameList = ref([]);
const selectedApiNames = ref([]);
const loading = ref(false);
const result = ref(null);

const emit = defineEmits(["latest-sql-log"]);

async function fetchApiNames() {
  loading.value = true;
  try {
    const res = await migrationApi.getApiEngines();
    if (res.data.success) {
      apiNameList.value = res.data.data;
      ElMessage.success("接口列表加载成功");
    } else {
      ElMessage.error(res.data.message || "加载接口列表失败");
    }
  } catch (e) {
    ElMessage.error("获取接口列表失败: " + e.message);
  } finally {
    loading.value = false;
  }
}

async function migrateApis() {
  if (selectedApiNames.value.length === 0) {
    ElMessage.warning("请选择要迁移的接口");
    return;
  }
  loading.value = true;
  result.value = null;
  try {
    const res = await migrationApi.batchMigrateApiEngines(
      selectedApiNames.value
    );
    if (res.data.success) {
      result.value = res.data;
      ElMessage.success("接口迁移成功");
      // 触发外部事件，通知最新日志
      emit("latest-sql-log", res.data.latestSqlLog);
    } else {
      ElMessage.error(res.data.message || "接口迁移失败");
    }
  } catch (e) {
    ElMessage.error("迁移失败: " + e.message);
  } finally {
    loading.value = false;
  }
}

// 自动加载接口列表
// fetchApiNames();

// 暴露方法
defineExpose({ fetchApiNames });
</script>

<style scoped>
.api-engine-migration {
  margin-top: 30px;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #eaeaea;
  padding: 20px;
}
.migration-result {
  margin-top: 20px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #eaeaea;
  padding: 15px;
}
</style>
